/*
 * @Author: your name
 * @Date: 2021-12-23 13:41:46
 * @LastEditTime: 2021-12-25 09:00:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day12 ts 路由 月考\my-app\src\views\index\House\House.tsx
 */
import React, { Component } from 'react'

import {connect} from "react-redux"
import {IState,ListItem} from "../../../store/store.d"
import {getList} from "../../../store/indexaction"

import Item from "../../../component/Item"

import Housemodule from "./House.module.scss"

import {newState} from "../../../store/store.d"

import Mask from "../../../component/Mask"

interface IProps{
    getlist:(obj:newState)=>void,
    list:ListItem[]
}

class House extends Component<IProps,newState>{

    state={
        page:1,
        pagesize:5,
        ind:0,
        flag:false,
        arr:[{
            info:"city",
            title:"区域",
            arrcon:["山西","北京","上海","天津","浙江"]
        },{
            info:"typenum",
            title:"筛选",
            arrcon:["卖房经纪人","租赁经纪人"]
        },{
            info:"typesort",
            title:"排序",
            arrcon:["由高到低","由低到高"]
        }]
    }

    componentDidMount(){
        let {page,pagesize}=this.state
        this.props.getlist({page,pagesize})
    }

    lookAdd=()=>{
        let {page,pagesize}=this.state
        this.setState({
            page:page+1
        },()=>{
            this.props.getlist({page:this.state.page,pagesize})
        })
    }

    changeflag(index:number){
        this.setState({
            ind:index,
            flag:true
        })
    }

    flagchange=()=>{
        this.setState({
            flag:false
        })
    }

    render() {
        let {list}=this.props
        let {arr,ind,flag}=this.state
        return (
            <div className={Housemodule.house}>
                <ol className={Housemodule.ols}>
                    {
                        arr&&arr.length?arr.map((item,index)=>{
                            return <li key={index} style={{color:ind===index?'red':''}} onClick={this.changeflag.bind(this,index)}>{item.title}</li>
                        }):<div>暂无数据</div>
                    }
                </ol>
                <div className={Housemodule.main}>
                    {
                        flag&&<Mask newCon={arr[ind].arrcon} flagchange={this.flagchange} info={arr[ind].info}/>
                    }
                    {
                        list&&list.length?list.map((item,index)=>{
                            return <Item key={index} item={item}/>
                        }):<div>暂无数据</div>
                    }
                    <button onClick={this.lookAdd}>查看更多</button>
                </div>
            </div>
        )
    }
}

export default connect((state:IState)=>{
    console.log(state);
    
    return {
        list:state.list
    }
},(dispatch:any)=>{
    return {
        getlist(obj:newState){
            dispatch(getList(obj))
        }
    }
})(House)
